import React from 'react';
import classnames from 'classnames';
import ReTips from '../ReTips';

// import { ReTabs, ReTab } from '../../widgets/ReTabs';
/*<ReTabs onChange={(e, i) => console.log(e, i)} >
    <ReTab label="tab1">
        <div>tab1cccc</div>
    </ReTab>
    <ReTab label="tab2">
        <div>tab2cccc</div>
    </ReTab>
</ReTabs>*/

export default class View extends React.Component {
    static propTypes = {
        defaultChild: React.PropTypes.string,
        onChange: React.PropTypes.func
    };

    static defaultProps = {
        defaultChild: 'none'
    }

    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            defaultChild: props.defaultChild
        };
    }
    componentWillMount() {
        this._isMounted = true;
        this.initCurrentIndex()
    }

    componentDidMount() {

    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    componentWillReceiveProps({ defaultChild }) {
        this.setState({
            defaultChild
        })
    }

    initCurrentIndex() {
        let defaultChild = this.state.defaultChild,
            index = this.getCurrentIndex(defaultChild)
        this.props.onChange && this.props.onChange(index, defaultChild, null)
    }

    getCurrentIndex(defaultChild) {
        let children = this.props.children;
        for (var k in children) {
            if (defaultChild === children[k].props.name) {
                return k;
            }
        }
    }

    handleChoose(index, name, e) {
        this.setState({
            defaultChild: name
        });

        this.props.onChange && this.props.onChange(index, name, e)
    }

    renderTabsList() {
        return (
            <ul className="tab-list">
                {this.props.children.map((child, i) => {
                    return (
                        <li 
                            key={child.props.label + i}
                            onTouchTap={(e) => this.handleChoose(i ,child.props.name, e)}
                            className={child.props.name === this.state.defaultChild ? "active" : ''} >
                                {child.props.label}
                                {child.props.tipsLabel ? <ReTips type={child.props.tipsType} label={child.props.tipsLabel} /> : null}
                        </li>
                    )
                })}
            </ul>
        );
    }

    renderTabscontent() {
        return this.props.children.map((child, i) => {
            return (
                <div 
                    key={'tab-content' + i}
                    className={child.props.name === this.state.defaultChild ? "tabs-content active" : 'tabs-content'}
                >
                     {child}
                </div>
            );
        })
    }

    render() {
        const classNames = classnames({
            'orin-sw-retabs-root': true,
            [this.props.className]: this.props.className ? true : false
        })
        return (
            <div className={ classNames } >
               {this.renderTabsList()}
               {this.renderTabscontent()}
            </div>
        );
    }
}
